
<template>
  <div class="detail">
    <router-header title="招聘申请"></router-header>
    <el-radio-group v-model="tab" size="mini" style="margin-bottom: 15px">
      <el-radio-button label="表单信息"></el-radio-button>
      <el-radio-button label="流程图"></el-radio-button>
      <el-radio-button label="审批记录"></el-radio-button>
    </el-radio-group>
 
    <div v-show="tab === '表单信息'" id="drawerPdf">
      <el-form ref="info" :model="info" label-width="120px">
        <el-form-item label="招聘部门：">{{ info.deptIdDictMap.name}}</el-form-item>
        <el-form-item label="申请原因：">{{ info.applyCause }}</el-form-item>
        <el-form-item label="申请说明：">{{ info.applyExplain }}</el-form-item>
        <div class="table-title">招聘明细</div>
        <el-table ref="recruitDetail" :data="info.recruitDetailList"
        size="mini"
        border
        style="margin-bottom: 20px"
        header-cell-class-name="table-header-gray"
        >
        <el-table-column label="序号" header-align="center" align="center" type="index" width="55px" />
        <el-table-column label="招聘岗位" prop="postDictMap.name">
        </el-table-column>
        <el-table-column label="招聘人数" prop="recruitNumber">
        </el-table-column>
        <el-table-column label="希望到岗日期" prop="arrivalDate">
          <!-- <template slot-scope="scope">
            <span>{{formatDateByStatsType(scope.row.arrivalDate, 'day')}}</span>
          </template> -->
        </el-table-column>
        <el-table-column label="招聘薪资" prop="wages">
        </el-table-column>
        <el-table-column label="招聘说明" prop="remark">
        </el-table-column>
        <el-table-column label="工作内容" prop="workContent">
        </el-table-column>
        </el-table>
      </el-form>
    </div>
    <div v-show="tab === '流程图'">
      <ProcessViewer
        :style="{ height: getMainContextHeight - 148 + 'px' }"
        :xml="entryXml"
        :finishedInfo="finishedInfo"
        :allCommentList="tableList"
      />
    </div>
    <div v-show="tab === '审批记录'">
      <el-table
        size="mini"
        header-cell-class-name="table-header-gray"
        ref="tableImpl"
        :data="tableList"
      >
        <el-table-column
          label="序号"
          header-align="center"
          align="center"
          type="index"
          width="55px"
        />
        <el-table-column label="流程环节" prop="taskName" />
        <el-table-column label="执行人" prop="createUsername"></el-table-column>
        <el-table-column label="操作" prop="approvalType">
          <!-- <template slot-scope="{ row }">
            {{ row.masterData.leaveBeginTime }}
          </template> -->
        </el-table-column>
        <el-table-column label="审批意见" prop="comment"></el-table-column>
        <el-table-column label="处理时间" width="180px" prop="createTime" />
      </el-table>
    </div>
  </div>
</template>
<script>
import { RecruitApp } from '@/api/approve.js';
import { mapGetters } from 'vuex';
import ProcessViewer from '@/views/workflow/components/ProcessViewer.vue';
/* eslint-disable-next-line */
import { findTreeNode, findTreeNodePath, findItemFromList } from '@/utils';
/* eslint-disable-next-line */
/* eslint-disable-next-line */
import { DropdownWidget } from '@/utils/widget.js';
// import flowMixins from '../../mixins/flowMixins.js';
/* eslint-disable-next-line */
import { uploadMixin, statsDateRangeMixin } from '@/core/mixins';
/* eslint-disable-next-line */
import { FieldFlowController, DictionaryController } from '@/api';
import { FlowOperationController} from '@/api/flowController.js';

// import projectConfig from '@/core/config';

export default {
  data () {
    return {
      info: {},
      tab: '表单信息',
      entryXml: null,
      tableList: [],
      finishedInfo: null
    };
  },
  
  components: {
    ProcessViewer
  },
  computed: {
    ...mapGetters(['getMainContextHeight'])
  },
  created () {
    if (this.$route.query.id) {
      this.getDetail();
    } else {
      this.$router.go(-1);
    }
    this.getRecords();
    this.getProcessBpmn();
    this.getViewHighlightFlowData();
  },
  methods: {
    // 获取详情数据
    getDetail () {
      RecruitApp.detail(this, {
        processInstanceId: this.$route.query.processInstanceId
      }).then((res) => {
        if (res.data) {
          this.info = res.data;
        }
      });
    },

    // 审批记录
    getRecords () {
      console.log('----------', this.$route.query)
      FlowOperationController.listFlowTaskComment(this, {
        processInstanceId: this.$route.query.processInstanceId
      }).then((res) => {
        this.tableList = res.data;
      });
    },
    // 流程图
    getProcessBpmn () {
      FlowOperationController.viewProcessBpmn(this, {
        processDefinitionId: this.$route.query.processDefinitionId
      }).then((res) => {
        this.entryXml = res.data;
      });
    },
    // 流程图高亮内容
    getViewHighlightFlowData () {
      FlowOperationController.viewHighlightFlowData(this, {
        processInstanceId: this.$route.query.processInstanceId
      }).then((res) => {
        this.finishedInfo = res.data;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.detail {
  position: relative;
}
.export{
  position: absolute;
  right:25px;
  top:18px;
}
.el-form-item {
  margin-bottom: 16px;
}
.table-title {
  padding: 0px 5px;
  height: 22px;
  line-height: 22px;
  margin: 3px 0px;
  border-left: 3px solid rgb(64, 158, 255);
  margin-bottom: 10px;
}
</style>
